/* 外部样式 优先于低于内部样式 高于默认样式 */
/* "*"通配符，所有的标签都将获得以下属性 */
* {
  /* 外边距 */
  margin: 0;
  /* 内边距 */
  padding: 0;
}

#style {
  width: 300px height: 300px;
  background-color: rgba(12, 23, 34, 0.5);
  background-image: url(../images/banner.jpeg);
  background-size: 300px 300px;
  /* background-repeat: no-repeat; */
  /* fixed 固定 attachment 依附 附着 依赖 be attached to 固定 爱慕  */
  /* background-attachment: fixed; */
  /* 第一个值是水瓶方向50px  第二个值是垂直方向的10px */
  /* background-position: center center; */
  box-shadow: 0px 0px 10px red;
  margin: 20px
}

.shadow {
  font-size: 32px;
  font-weight: bold;
  /* horizontal水平值 vertical垂直值 */
  /* 方向 */
  /* 
    正：水平向右，垂直向下
    负：反之
     */
  text-shadow: 5px 5px 10px red;
}

/* 伪类 */
.btn {
  width: 80px;
  height: 36px;
  background-color: #fff;
  /* 边框：粗细 线性（虚线 实线 点划线） 颜色 */
  border: 1px solid black;

  /* 圆角大小 */
  /* 圆角矩形 */
  border-radius: 3px;
  margin: 20px;
  /* 小手的指示器 */
  cursor: pointer;
}

/* 鼠标悬浮 */
.btn:hover {
  background-color: #62bf82;
  color: #fff;
  border: none;
}

.box-model {
  width: 300px;
  height: 300px;
  background-color: red;
  margin: 40px;
  padding: 30px;
  /* 怪异盒子模型 */
  box-sizing: border-box;
  border: 20px solid blue;
}

.if-show {
  /* 呈现方式 */
  /* display: none; */
  /* 可见度  隐藏 */
  /* visibility: hidden; */
  /* bolck:把元素转换成块级元素 换行显示 */
  display: block;
}

.container {
  width: 300px;
}

.container ul {
  display: none;
}

.container:hover ul {
  display: block;
}